<template>
  <div class="inspectPdf container flex" id="container">
    <div class="pdf-btn" @click="htmlToPdf">下载</div>
    <!-- <div class="back-btn" @click="$router.back()">返回</div> -->
    <main class="details-container-wrap flex column" ref="printArea">
      <div class="police-agency">{{ policeCheckTaskInfo.policeAgencyName }}</div>
      <div class="hr"></div>
      <div class="document-police-agency">{{ policeCheckTaskInfo.policeAgencyName }}</div>
      <common-title :title="'单位场所信息'" :is_print="false" />
      <table>
        <tr>
          <td class="td-label">单位名称</td>
          <td class="td-value td-w-580">{{ policeCheckTaskInfo.companyMessageName }}</td>
          <td class="td-label">场所分类</td>
          <td class="td-value">{{ policeCheckTaskInfo.industryInformationName }}</td>
        </tr>
        <tr>
          <td class="td-label">统一社会信用代码</td>
          <td class="td-value td-w-580">{{ policeCheckTaskInfo.companyCreditCode }}</td>
          <td class="td-label">责任民警</td>
          <td class="td-value">{{ policeCheckTaskInfo.companyPoliceUserName }}</td>
        </tr>
        <tr>
          <td class="td-label">法人信息</td>
          <td class="td-value td-w-580">{{ policeCheckTaskInfo.companyLegalPersonName }}</td>
          <td class="td-label">法人联系方式</td>
          <td class="td-value">{{ policeCheckTaskInfo.companyLegalMobile }}</td>
        </tr>
        <tr>
          <td class="td-label">营业地址</td>
          <td class="td-value" colspan="4">{{ policeCheckTaskInfo.companyAddressDetail }}</td>
        </tr>
      </table>

      <common-title :title="'检查信息'" :is_print="false" />
      <table>
        <tr>
          <td class="td-label">检查民/辅警</td>
          <td class="td-value td-w-580">{{ policeCheckTaskInfo.policeUserName }}</td>
          <td class="td-label" rowspan="5">民警签到图</td>
          <td class="td-value" rowspan="5" style="padding: 0">
            <img
              class="cursor cusImg signImg"
              :id="policeCheckTaskInfo.signPicture"
              @click="werImg(policeCheckTaskInfo.signPicture)"
              :src="imgPrefix + policeCheckTaskInfo.signPicture"
              :data-original="imgPrefix + policeCheckTaskInfo.signPicture"
            />
          </td>
        </tr>

        <tr>
          <td class="td-label">警 号</td>
          <td class="td-value td-w-580">{{ policeCheckTaskInfo.policeUserNo }}</td>
        </tr>

        <tr>
          <td class="td-label">同行民/辅警</td>
          <td class="td-value td-w-580">
            {{ handle_police_check_task_auxiliary_infoList(policeCheckTaskInfo.policeCheckTaskAuxiliaryInfoList) }}
          </td>
        </tr>

        <tr>
          <td class="td-label">检查类型</td>
          <td class="td-value td-w-580">{{ policeCheckTaskInfo.industryExamineName }}</td>
        </tr>

        <tr>
          <td class="td-label">检查/复查</td>
          <td class="td-value td-w-580">{{ policeCheckTaskInfo.checkType == 1 ? '检查' : '复查' }}</td>
        </tr>

        <tr>
          <td class="td-label">检查时间</td>
          <td class="td-value" colspan="4">{{ policeCheckTaskInfo.checkTime }}</td>
        </tr>
      </table>

      <common-title :title="'检查内容'" :is_print="false" />
      <div class="table-header">
        <div class="td-label thead-td">检查类别</div>
        <div class="td-value td-column-2 thead-td">检查项</div>
        <div class="td-value thead-td td-column-3" style="text-align: center">检查记录</div>
      </div>

      <div
        class="flex check-content"
        v-if="checkCategoryInfoList.length"
        v-for="(iterator, index) in checkCategoryInfoList"
      >
        <div class="check-label">
          {{ iterator.industryExamineCategoryName }}
        </div>
        <div class="f1 flex column">
          <div
            class="check-context"
            v-for="(item, index) in iterator.checkDetailInfoList"
            :class="item.pass == 0 ? 'check-wraming-color' : ''"
          >
            {{ index + 1 }}、 {{ item.industryExamineDetailName }}
          </div>
        </div>
        <div>
          <div
            class="check-result"
            v-for="(item, index) in iterator.checkDetailInfoList"
            :class="item.pass == 0 ? 'check-wraming-color' : ''"
          >
            {{ calc_pass_type(item.pass) }}
          </div>
        </div>
      </div>

      <common-title :title="'检查结果'" :is_print="false" style="margin-top: 0.22rem" />
      <!-- 合格 -->
      <table v-if="policeCheckTaskInfo.checkResult == 1">
        <tr>
          <td class="td-label" style="height: 0.92rem">检查结果</td>
          <td class="td-value td-w-580" style="height: 0.92rem">{{ policeCheckTaskInfo.checkResultName }}</td>
          <td class="td-label" style="height: 0.92rem">责任人签名</td>
          <td class="td-value" style="height: 0.92rem; padding: 0">
            <img
              class="cursor cusImg principalSignImg"
              :id="policeCheckTaskInfo.principalSignatureUrl"
              @click="werImg(policeCheckTaskInfo.principalSignatureUrl)"
              :src="imgPrefix + policeCheckTaskInfo.principalSignatureUrl"
              :data-original="imgPrefix + policeCheckTaskInfo.principalSignatureUrl"
            />
          </td>
        </tr>
      </table>

      <!-- 不合格 -->
      <table v-else>
        <tr>
          <td class="td-label">检查结果</td>
          <td class="td-value td-w-580">{{ policeCheckTaskInfo.checkResultName }}</td>
          <td class="td-label">电子公文</td>
          <td class="td-value">见附件</td>
        </tr>
        <tr>
          <td class="td-label">处罚结果</td>
          <td class="td-value td-w-580">{{ policeCheckUnqualifiedInfo.rectificationTypeName }}</td>
          <td class="td-label" rowspan="2">责任人签名</td>
          <td class="td-value" rowspan="2" style="padding: 0">
            <img
              class="cursor cusImg principalSignImg"
              :id="policeCheckTaskInfo.principalSignatureUrl"
              @click="werImg(policeCheckTaskInfo.principalSignatureUrl)"
              :src="imgPrefix + policeCheckTaskInfo.principalSignatureUrl"
              :data-original="imgPrefix + policeCheckTaskInfo.principalSignatureUrl"
            />
          </td>
        </tr>
        <tr>
          <td class="td-label">企业回执截止日期</td>
          <td class="td-value td-w-580">{{ policeCheckUnqualifiedInfo.penaltyEndTime }}</td>
        </tr>
      </table>

      <common-title
        :title="'检查不合格详情'"
        :is_print="false"
        v-if="policeCheckCategoryInfoList && policeCheckCategoryInfoList.length > 0"
      />
      <table>
        <div
          :key="index"
          v-for="(item, index) in policeCheckCategoryInfoList"
          v-if="policeCheckCategoryInfoList && policeCheckCategoryInfoList.length > 0"
        >
          <div v-for="(iterator, i) in item.policeCheckDetailInfoList" :key="i">
            <tr>
              <td class="td-label vm" style="color: #e8b529">不合格项 {{ index + 1 }}</td>
              <td class="td-value td-w-980 vm" style="color: #e8b529">
                {{ iterator.sortOrder }}、{{ iterator.industryExamineDetailName }}
              </td>
            </tr>

            <tr>
              <td class="td-label vm">所属分类</td>
              <td class="td-value td-w-980 vm">【{{ item.industryExamineCategoryName }}】</td>
            </tr>

            <tr v-for="(law, index) in iterator.regulationsInfoList" :key="index">
              <td class="td-label vm" style="height: auto">法律依据 {{ index + 1 }}</td>
              <td
                class="td-value td-w-980"
                style="
                  height: auto;
                  overflow: visible;
                  white-space: normal;
                  text-overflow: clip;
                  padding: 0.1rem 0.2rem;
                "
              >
                《{{ law.regulationsName }}》-{{ law.regulationsArticleNo }} <br />
                <div v-html="law.regulationsArticleContent" style="margin-top: 5px"></div>
              </td>
            </tr>

            <tr>
              <td class="td-label vm" style="height: auto">文字证据</td>
              <td
                class="td-value td-w-980"
                style="
                  height: auto;
                  overflow: visible;
                  white-space: normal;
                  text-overflow: clip;
                  padding: 0.1rem 0.2rem;
                "
              >
                {{ iterator.checkMemo }}
              </td>
            </tr>

            <tr v-if="iterator.failedImageInfoList && iterator.failedImageInfoList.length > 0">
              <td class="td-label vm" style="height: 1.54rem">图片证据</td>
              <td class="td-value td-w-980" style="height: 1.54rem; padding: 0">
                <div class="img-wrap flex" style="padding: 0.1rem 0.2rem">
                  <img
                    :key="index"
                    class="cursor cusImg"
                    :src="`${imgPrefix + img.path}`"
                    :id="'receiptImageInfoList' + index"
                    :data-original="`${imgPrefix + img.path}`"
                    @click="werImg('receiptImageInfoList' + index)"
                    v-for="(img, index) in iterator.failedImageInfoList"
                  />
                </div>
              </td>
            </tr>
          </div>
        </div>
      </table>

      <common-title
        :title="'检查回执'"
        :is_print="false"
        v-if="policeCheckUnqualifiedInfo && policeCheckUnqualifiedInfo.isReceipt == 1"
      />
      <table v-if="policeCheckUnqualifiedInfo && policeCheckUnqualifiedInfo.isReceipt == 1">
        <tr>
          <td class="td-label">回执提交时间</td>
          <td class="td-value td-w-580">{{ policeCheckUnqualifiedInfo.receiptTime }}</td>
          <td class="td-label">回执是否逾期</td>
          <td class="td-value">{{ policeCheckUnqualifiedInfo.isReceiptOverdue == 0 ? '否' : '是' }}</td>
        </tr>
        <tr>
          <td class="td-label" style="height: 1.44rem">回执图片</td>
          <td class="td-value td-w-580" style="height: 1.44rem; padding: 0">
            <div class="img-wrap flex" style="padding: 0.1rem 0.2rem">
              <img
                :key="index"
                class="cursor cusImg"
                :src="`${imgPrefix + item.path}`"
                :id="'receiptImageInfoList' + index"
                :data-original="`${imgPrefix + item.path}`"
                @click="werImg('receiptImageInfoList' + index)"
                v-for="(item, index) in policeCheckUnqualifiedInfo.receiptImageInfoList"
              />
            </div>
          </td>
          <td class="td-label" style="height: 1.44rem">回执文字</td>
          <td class="td-value cancel-text-overflow" style="height: 1.44rem">
            {{ policeCheckUnqualifiedInfo.receiptContent }}
          </td>
        </tr>
      </table>

      <!-- <common-title :title="'检查单附件'" :is_print="false" v-if="show_check_doc" class="no-print" /> -->
      <doc :title="'检查单附件'" :id="check_unqualifiedId" :result="check_detail" v-if="show_check_doc"></doc>

      <div class="recheck" v-if="checkType == 2">
        <common-title :title="'复查信息'" :is_print="false" />
        <table>
          <tr>
            <td class="td-label">复查民警</td>
            <td class="td-value td-w-620">{{ recheck_policeCheckTaskInfo.companyPoliceUserName }}</td>
            <td class="td-label" rowspan="5">民警签到图</td>
            <td class="td-value" rowspan="5" style="padding: 0">
              <img
                class="cursor cusImg signImg"
                :id="recheck_policeCheckTaskInfo.signPicture"
                @click="werImg(recheck_policeCheckTaskInfo.signPicture)"
                :src="imgPrefix + recheck_policeCheckTaskInfo.signPicture"
                :data-original="imgPrefix + recheck_policeCheckTaskInfo.signPicture"
              />
            </td>
          </tr>

          <tr>
            <td class="td-label">警 号</td>
            <td class="td-value td-w-620">{{ recheck_policeCheckTaskInfo.policeUserNo }}</td>
          </tr>

          <tr>
            <td class="td-label">辅 警</td>
            <td class="td-value td-w-620">
              {{
                handle_police_check_task_auxiliary_infoList(
                  recheck_policeCheckTaskInfo.policeCheckTaskAuxiliaryInfoList
                )
              }}
            </td>
          </tr>

          <tr>
            <td class="td-label">检查类型</td>
            <td class="td-value td-w-620">{{ recheck_policeCheckTaskInfo.industryExamineName }}</td>
          </tr>

          <tr>
            <td class="td-label">检查/复查</td>
            <td class="td-value td-w-620">{{ recheck_policeCheckTaskInfo.checkType == 1 ? '检查' : '复查' }}</td>
          </tr>

          <tr>
            <td class="td-label">复查时间</td>
            <td class="td-value" colspan="4">{{ recheck_policeCheckTaskInfo.checkTime }}</td>
          </tr>
        </table>

        <common-title :title="'复查内容'" :is_print="false" />
        <div style="margin-bottom: 0" class="table-header">
          <div class="td-label thead-td">检查类别</div>
          <div class="td-value td-column-2 thead-td">检查项</div>
          <div class="td-value thead-td td-column-3" style="text-align: center">检查记录</div>
        </div>

        <div
          class="flex check-content"
          v-if="recheck_checkCategoryInfoList.length"
          v-for="(iterator, index) in recheck_checkCategoryInfoList"
        >
          <div class="check-label">
            {{ iterator.industryExamineCategoryName }}
          </div>
          <div class="f1 flex column">
            <div
              class="check-context"
              v-for="(item, index) in iterator.checkDetailInfoList"
              :class="
                (item.pass == 0 ? 'check-wraming-color' : '',
                iterator.checkDetailInfoList.length == 1 ? 'flex-item-center' : '')
              "
            >
              {{ index + 1 }}、 {{ item.industryExamineDetailName }}
            </div>
          </div>
          <div>
            <div
              class="check-result"
              v-for="(item, index) in iterator.checkDetailInfoList"
              :class="
                (item.pass == 0 ? 'check-wraming-color' : '',
                iterator.checkDetailInfoList.length == 1 ? 'flex-item-center' : '')
              "
            >
              {{ calc_pass_type(item.pass) }}
            </div>
          </div>
        </div>

        <common-title :title="'复查结果'" :is_print="false" style="margin-top: 0.22rem" />
        <!-- 合格 -->
        <table v-if="recheck_policeCheckTaskInfo.checkResult == 1">
          <tr>
            <td class="td-label" style="height: 0.92rem">复查结果</td>
            <td class="td-value td-w-620" style="height: 0.92rem">
              {{ recheck_policeCheckTaskInfo.checkResultName }}
            </td>
            <td class="td-label" style="height: 0.92rem">责任人签名</td>
            <td class="td-value" style="height: 0.92rem; padding: 0">
              <img
                class="cursor cusImg principalSignImg"
                :id="recheck_policeCheckTaskInfo.principalSignatureUrl"
                @click="werImg(recheck_policeCheckTaskInfo.principalSignatureUrl)"
                :src="imgPrefix + recheck_policeCheckTaskInfo.principalSignatureUrl"
                :data-original="imgPrefix + recheck_policeCheckTaskInfo.principalSignatureUrl"
              />
            </td>
          </tr>
        </table>

        <!-- 不合格 -->
        <table v-else>
          <tr>
            <td class="td-label">复查结果</td>
            <td class="td-value td-w-620">{{ recheck_policeCheckTaskInfo.checkResultName }}</td>
            <td class="td-label">电子公文</td>
            <td class="td-value">见附件</td>
          </tr>
          <tr>
            <td class="td-label">处罚结果</td>
            <td class="td-value td-w-620">{{ recheck_policeCheckUnqualifiedInfo.rectificationTypeName }}</td>
            <td class="td-label" rowspan="2">责任人签名</td>
            <td class="td-value" rowspan="2" style="padding: 0">
              <img
                class="cursor cusImg principalSignImg"
                :id="recheck_policeCheckTaskInfo.principalSignatureUrl"
                @click="werImg(recheck_policeCheckTaskInfo.principalSignatureUrl)"
                :src="imgPrefix + recheck_policeCheckTaskInfo.principalSignatureUrl"
                :data-original="imgPrefix + recheck_policeCheckTaskInfo.principalSignatureUrl"
              />
            </td>
          </tr>
          <tr>
            <td class="td-label">企业回执截止日期</td>
            <td class="td-value td-w-580">{{ recheck_policeCheckUnqualifiedInfo.penaltyEndTime }}</td>
          </tr>
        </table>

        <common-title
          :title="'复查不合格详情'"
          :is_print="false"
          v-if="recheck_policeCheckCategoryInfoList && recheck_policeCheckCategoryInfoList.length > 0"
        />
        <table>
          <div
            :key="index"
            v-for="(item, index) in recheck_policeCheckCategoryInfoList"
            v-if="recheck_policeCheckCategoryInfoList && recheck_policeCheckCategoryInfoList.length > 0"
          >
            <div v-for="(iterator, i) in item.policeCheckDetailInfoList" :key="i">
              <tr>
                <td class="td-label vm" style="color: #e8b529">不合格项 {{ index + 1 }}</td>
                <td class="td-value td-w-980 vm" style="color: #e8b529">
                  {{ iterator.sortOrder }}、{{ iterator.industryExamineDetailName }}
                </td>
              </tr>

              <tr>
                <td class="td-label vm">所属分类</td>
                <td class="td-value td-w-980 vm">【{{ item.industryExamineCategoryName }}】</td>
              </tr>

              <tr v-for="(law, index) in iterator.regulationsInfoList" :key="index">
                <td class="td-label vm" style="height: auto">法律依据 {{ index + 1 }}</td>
                <td
                  class="td-value td-w-980"
                  style="
                    height: auto;
                    overflow: visible;
                    white-space: normal;
                    text-overflow: clip;
                    padding: 0.1rem 0.2rem;
                  "
                >
                  《{{ law.regulationsName }}》-{{ law.regulationsArticleNo }} <br />
                  <div v-html="law.regulationsArticleContent" style="margin-top: 5px"></div>
                </td>
              </tr>

              <tr>
                <td class="td-label vm" style="height: auto">文字证据</td>
                <td
                  class="td-value td-w-980"
                  style="
                    height: auto;
                    overflow: visible;
                    white-space: normal;
                    text-overflow: clip;
                    padding: 0.1rem 0.2rem;
                  "
                >
                  {{ iterator.checkMemo }}
                </td>
              </tr>

              <tr v-if="iterator.failedImageInfoList && iterator.failedImageInfoList.length > 0">
                <td class="td-label vm" style="height: 1.54rem">图片证据</td>
                <td class="td-value td-w-980" style="height: 1.54rem; padding: 0">
                  <div class="img-wrap flex" style="padding: 0.1rem 0.2rem">
                    <img
                      :key="index"
                      class="cursor cusImg"
                      :src="`${imgPrefix + img.path}`"
                      :id="'receiptImageInfoList' + index"
                      :data-original="`${imgPrefix + img.path}`"
                      @click="werImg('receiptImageInfoList' + index)"
                      v-for="(img, index) in iterator.failedImageInfoList"
                    />
                  </div>
                </td>
              </tr>
            </div>
          </div>
        </table>

        <common-title
          :title="'复查回执'"
          :is_print="false"
          v-if="recheck_policeCheckUnqualifiedInfo && recheck_policeCheckUnqualifiedInfo.isReceipt == 1"
        />
        <table v-if="recheck_policeCheckUnqualifiedInfo && recheck_policeCheckUnqualifiedInfo.isReceipt == 1">
          <tr>
            <td class="td-label">回执提交时间</td>
            <td class="td-value td-w-620">{{ recheck_policeCheckUnqualifiedInfo.penaltyEndTime }}</td>
            <td class="td-label">回执是否逾期</td>
            <td class="td-value">{{ recheck_policeCheckUnqualifiedInfo.isReceiptOverdue == 0 ? '否' : '是' }}</td>
          </tr>
          <tr>
            <td class="td-label" style="height: 1.44rem">回执图片</td>
            <td class="td-value td-w-620" style="height: 1.44rem; padding: 0">
              <div class="img-wrap flex" style="padding: 0.1rem 0.2rem">
                <img
                  v-for="(item, index) in recheck_policeCheckUnqualifiedInfo.receiptImageInfoList"
                  :key="index"
                  class="cursor cusImg"
                  :id="'idimg' + index"
                  @click="werImg('idimg' + index)"
                  :src="`${imgPrefix + item.path}`"
                  :data-original="`${imgPrefix + item.path}`"
                />
              </div>
            </td>
            <td class="td-label" style="height: 1.44rem">回回执文字执图片</td>
            <td class="td-value cancel-text-overflow" style="height: 1.44rem">
              {{ recheck_policeCheckUnqualifiedInfo.receiptContent }}
            </td>
          </tr>
        </table>

        <!-- <common-title :title="'复查单附件'" :is_print="false" v-if="show_recheck_doc" class="no-print" /> -->
        <doc :title="'复查单附件'" :id="recheck_unqualifiedId" :result="recheck_detail" v-if="show_recheck_doc"></doc>
      </div>
    </main>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import commonTitle from './commonTitle'
import { findEnableDictItemsbyCode } from '@/api/api'
import { getAction, postAction } from '@/api/manage'
import doc from './components/document'
export default {
  name: 'printPDF',
  components: { commonTitle, doc },
  data() {
    return {
      imgPrefix: '',
      records: {},

      checkType: undefined, //checkType  1.检查单  2.复查单
      checkResult: undefined, //checkResult  1.合格  2.不合格

      id: '',
      policeCheckTaskId: '',

      policeCheckTaskInfo: {}, // 检查单内容
      policeCheckUnqualifiedInfo: {}, //	不合格内容
      checkCategoryInfoList: [], // 检查项信息
      policeCheckCategoryInfoList: [], // 不合格信息
      check_unqualifiedId: '', // 检查不合格id

      recheck_policeCheckTaskInfo: {}, // 复查单内容
      recheck_policeCheckUnqualifiedInfo: {}, //	不合格内容
      recheck_checkCategoryInfoList: [], // 复查项信息
      recheck_policeCheckCategoryInfoList: [], // 不合格信息
      recheck_unqualifiedId: '', // 复查不合格id

      show_check_doc: false,
      check_detail: {},
      show_recheck_doc: false,
      recheck_detail: {},
    }
  },
  mounted() {
    this.get_dict()
    this.hide_top()

    let { checkType, checkResult, policeCheckTaskId, id } = this.$route.query
    this.checkType = checkType
    this.checkResult = checkResult
    this.id = id
    if (checkType == 2) {
      this.policeCheckTaskId = policeCheckTaskId
      this.get_check_details(policeCheckTaskId)
      this.get_check_details(id, true)
    } else {
      this.get_check_details(id)
    }
  },
  methods: {
    hide_top() {
      document.getElementsByClassName('ant-layout-header')[0].style.display = 'none'
      document.getElementsByTagName('body')[0].style.background = '#fff'
      document.getElementsByClassName('ant-layout-content')[0].style.background = '#fff'
    },
    async get_dict() {
      let res = await findEnableDictItemsbyCode({ code: 'static_server' })
      this.imgPrefix = res.result[0].value
    },

    async get_check_details(taskId, isRecheck = false) {
      let {
        result: { policeCheckTaskInfo, policeCheckUnqualifiedInfo, checkCategoryInfoList, policeCheckCategoryInfoList },
      } = await getAction('/police/check_task/record', { taskId })

      if (isRecheck) {
        this.recheck_policeCheckTaskInfo = policeCheckTaskInfo
        this.recheck_policeCheckUnqualifiedInfo = policeCheckUnqualifiedInfo
        this.recheck_checkCategoryInfoList = checkCategoryInfoList
        this.recheck_policeCheckCategoryInfoList = policeCheckCategoryInfoList

        let { id: doc_id } = this.recheck_policeCheckUnqualifiedInfo || null
        if (!doc_id) return
        this.recheck_unqualifiedId = doc_id
        this.get_doc_details(doc_id, true)
      } else {
        this.policeCheckTaskInfo = policeCheckTaskInfo
        this.policeCheckUnqualifiedInfo = policeCheckUnqualifiedInfo
        this.checkCategoryInfoList = checkCategoryInfoList
        this.policeCheckCategoryInfoList = policeCheckCategoryInfoList

        let { id: doc_id } = this.policeCheckUnqualifiedInfo || null
        if (!doc_id) return
        this.check_unqualifiedId = doc_id
        this.get_doc_details(doc_id)
      }
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    htmlToPdf() {
      document.head.getElementsByTagName('title')[0].innerText =
        this.policeCheckTaskInfo.companyMessageName + '检查记录单'
      let jubuData = document.getElementById('container').innerHTML
      window.document.body.innerHTML = jubuData
      window.print()
      window.location.reload()
    },

    handle_police_check_task_auxiliary_infoList(list) {
      if (!list) return '暂无'
      if (list.length < 0) return '暂无'
      const policeUserNames = list.map((item) => item.policeUserName)
      return policeUserNames.join(',')
    },

    async get_doc_details(unqualifiedId, isRecheck = false) {
      let { result } = await getAction('/police/check_task/electronic_records', { unqualifiedId })
      if (isRecheck) {
        this.recheck_detail = result
        this.show_recheck_doc = true
      } else {
        this.check_detail = result
        this.show_check_doc = true
      }
    },

    find_unPass(list) {
      this.main_text = ''
      list.forEach((el) => {
        const sortOrderArray = el.checkDetailInfoList
          .reduce((result, item) => (item.pass === 0 ? [...result, item.sortOrder] : result), [])
          .join('、')
        this.main_text +=
          `<u>${el.industryExamineCategoryName}</u>` + '存在下列第' + `<u>${sortOrderArray}</u>` + '违法行为，'
      })
    },

    calc_pass_type(type) {
      if (type == 1) return '是'
      else if (type == 0) return '否'
      else if (type == 2) return '不涉及'
      else return '暂无'
    },
  },
}
</script>

<style lang="less">
@media print {
  body {
    background: #fff;
  }
  .pdf-btn {
    display: none;
  }
}
</style>
<style lang="less" scoped>
@media print {
  @page {
    size: 12.4rem 17.53rem;
    margin-top: 10px;
  }
  body {
    background: #fff;
  }
  .pdf-btn {
    display: none;
  }
}
.cancel-text-overflow {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: break-all;
}

table {
  font-family: PingFang SC-Medium, PingFang SC;
  border-collapse: collapse;
  font-weight: 500;
  margin-top: 0.12rem;
  margin-bottom: 0.22rem;
}

tr {
  width: 100%;
  height: 0.46rem;
  font-size: 0.2rem;
  // page-break-inside: avoid;
}

.thead-td {
  background: #f5f5f5 !important;
  border: 1px solid #e4e4e4 !important;
  font-size: 0.2rem;
  font-weight: 500;
  color: #9b9b9b !important;
}

.td-label {
  background: #f5f5f5;
  border: 1px solid #e4e4e4;
  color: #9b9b9b;
  width: 1.65rem;
  text-align: center;
  page-break-inside: avoid;
}

.td-value {
  background: #fff;
  border: 1px solid #ddd;
  color: #000;
  padding-left: 0.25rem;
  width: 2.1rem;
  max-width: 2.1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  page-break-inside: avoid;
  font-size: 0.2rem;

  .signImg {
    width: 2.1rem;
    height: 2.3rem;
    object-fit: cover;
  }
  .principalSignImg {
    height: 0.7rem;
    object-fit: cover;
  }

  .img-wrap {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    img {
      width: 1.74rem;
      height: 1.3rem;
      margin-right: 0.2rem;
      object-fit: cover;
    }
  }
}

.td-w-580 {
  width: 5.8rem;
  max-width: 5.8rem;
}
.td-w-620 {
  width: 6.2rem;
  max-width: 6.2rem;
}

.td-w-740 {
  width: 7.4rem;
  max-width: 7.4rem;
}

.td-w-780 {
  width: 7.8rem;
  max-width: 7.8rem;
}

.td-w-980 {
  width: 9.8rem;
  max-width: 9.8rem;
}

.vm {
  vertical-align: middle;
}
.click-style {
  color: #47e829;
  cursor: pointer;
}
</style>
<style scoped lang="less">
.container {
  padding: 0;
  // height: 9999px;
  background-color: #f0f2f5;
}
.police-agency {
  font-size: 0.14rem;
  font-family: Source Han Serif;
  font-weight: bold;
  color: #9b9b9b;
  text-align: right;
}

.hr {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #dcdcdc;
}

.details-container-wrap {
  width: 12.4rem;
  padding: 0.5rem;
  padding-top: 0.2rem;
  background-color: #ffffff;
  margin: 0 auto;
  font-size: 0.2rem;
}

.document-police-agency {
  font-size: 36px;
  font-family: Source Han Serif;
  font-weight: bold;
  color: #000000;
  text-align: center;
}

.check-content {
  // margin-bottom: 0.22rem;

  .check-label {
    background: #ffffff;
    border: 1px solid #efefef;
    color: #b0b0b0;
    width: 1.65rem;
    border-top: none;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .check-context {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    color: #434343;
    height: 0.46rem;
    line-height: 0.46rem;
    padding-left: 0.2rem;
    page-break-inside: avoid;
  }
  .flex-item-center {
    align-items: center;
    display: flex;
    height: 100% !important;
  }
  .check-result {
    background: #fff;
    border: 1px solid #f0f0f0;
    color: #434343;
    width: 2.15rem;
    height: 0.46rem;
    border-top: none;

    display: flex;
    align-items: center;
    justify-content: center;
    page-break-inside: avoid;
  }

  .check-wraming-color {
    color: #ee1c1c;
  }
}
.table-header {
  display: flex;
  height: 0.46rem;
  margin-top: 0.12rem;
  .td-label {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .td-column-2 {
    flex: 1 !important;
    width: unset !important;
    max-width: unset;
    display: flex;
    align-items: center;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .td-column-3 {
    display: flex;
    align-items: center;
    width: 2.15rem;
    max-width: 2.15rem;
  }
}
</style>
